<template>
  <VxeTablePure
    :tableColumns="cols"
    :tableData="tableData"
    :full-data="fullList"    
    :page="page"
    @update:page="page = $event"
    :show-pager="true"
    :stripe="false"
    :row-class-name="handleMyRowClass"
    @selection-change="handleSelectionChange"
    style="height: 400px"
  />
</template>

<script setup>
import { ref, computed } from 'vue'
import VxeTablePure from '@/components/ActionVxeTableCont.vue'
/* ---------- 配置文件 ---------- */
import defaultConfig from '@config/index.js'; 
// const sortConfig = { remote: false }// 排序配置 false 本地排序 true 服务器排序

const cols = [
  { 
    type: 'checkbox',
    width: 60
  },
  { 
    field: 'id', 
    title: 'ID', 
    width: 80,
    sortable: true
  },
  { 
    field: 'name', 
    title: '姓名',
    sortable: true,
    is_filter: true  // 只需设置这个属性

  },
  {
    field: 'age',
    title: '年龄',
    sortable: true,
    filters: [
      { label: '小于25岁', value: 25 },
      { label: '25-35岁', value: 35 },
      { label: '大于35岁', value: 36 }
    ],
    filterMethod: ({ value, row }) => {
      if (value === 25) return row.age < 25
      if (value === 35) return row.age >= 25 && row.age <= 35
      if (value === 36) return row.age > 35
      return true
    }
  },
  {
    field: 'department',
    title: '部门',
    filters: [
      { label: '技术部', value: '技术部' },
      { label: '市场部', value: '市场部' },
      { label: '人事部', value: '人事部' }
    ],
    filterMethod: ({ value, row }) => {
      return row.department === value
    }
  }
]

// 原始数据
const list = ref([
  { id: 1, name: '张三', age: 28, department: '技术部' },
  { id: 2, name: '李四', age: 32, department: '市场部' },
  { id: 3, name: '王五', age: 24, department: '技术部' },
  { id: 4, name: '赵六', age: 38, department: '人事部' },
  { id: 5, name: '钱七', age: 29, department: '技术部' },
  { id: 6, name: '孙八', age: 26, department: '市场部' },
  { id: 7, name: '周九', age: 31, department: '人事部' },
  { id: 8, name: '吴十', age: 27, department: '技术部' },
  { id: 9, name: '郑一', age: 33, department: '技术部' },
  { id: 10, name: '王二', age: 25, department: '市场部' },
  { id: 11, name: '张三丰', age: 36, department: '人事部' },
  { id: 12, name: '李小明', age: 29, department: '技术部' }
])

// 传递完整数据给 VxeTablePure
const fullList = []//ref(list.value)
// 分页配置

const page = ref({
  currentPage: defaultConfig.tableCurrentPage,
  pageSize: defaultConfig.tablePageSize,
  pageSizes: defaultConfig.tablePageSizes ,
  total: list.value.length
})
  
// 计算当前页数据
const tableData = computed(() => {
  const start = (page.value.currentPage - 1) * page.value.pageSize
  const end = start + page.value.pageSize
  return list.value.slice(start, end)
})

// 更新总条数
//page.value.total = list.value.length

const handleSelectionChange = (selection) => {
  console.log('选中:', selection)

  // 在这里添加您需要的业务逻辑
  // 例如：
  // - 显示行详情
  // - 跳转到编辑页面
  // - 弹出操作菜单等
}
// 行类名函数
const handleMyRowClass = ({ row, rowIndex }) => {
 //  stripe="true" 下面语句会失效，若下面生效必须改stripe="false"
// 年龄大于38岁的行 - 高亮为黄色
  if (row.age >= 38) {
    return 'bg-yellow-300'
  }
  // 奇数行
  else if (rowIndex % 2 === 0) {
    return 'bg-gray-100'
  }
  // 偶数行
  else {
    return 'bg-white'
  }
}
</script>
